<template>
    <view class="upgrade_container">
        <view class="info">
            <view class="info_l">
                <image class="avatar" :src="state.avatar" />
            </view>
            <view class="info_r">
                <view class="nickname">{{ state.nickname }}</view>
                <view class="level">
                    <view class="level_label">当前等级：</view>
                    <view class="level_text">{{ state.levelName || '-' }}</view>
                </view>
            </view>
        </view>
        <vlew v-if="!state.highLevel && state.levelName" class="rule">
            <view class="rule_title">【{{ state.nextLevelName }}】的升级条件</view>
            <view v-if="state.nextAddToPlug" class="rule_item">
                <view class="rule_item_l">
                    <image class="rule_item_l_icon" src="/static/distribution/money.png" />
                </view>
                <view class="rule_item_r">
                    <view class="rule_item_r_t">累计推广金额达￥{{ state.nextAddToPlug }}</view>
                    <view class="rule_item_r_b">
                        当前进度：<text class="active">￥{{ state.addToPlug }} </text>/￥{{ state.nextAddToPlug }}
                    </view>
                </view>
            </view>
            <view v-if="state.nextBindFansNum" class="rule_item">
                <view class="rule_item_l">
                    <image class="rule_item_l_icon" src="/static/distribution/fans.png" />
                </view>
                <view class="rule_item_r">
                    <view class="rule_item_r_t">累计绑定粉丝{{ state.nextBindFansNum }}个</view>
                    <view class="rule_item_r_b">
                        当前进度：<text class="active">{{ state.bindFansNum }} </text>/{{ state.nextBindFansNum }}
                    </view>
                </view>
            </view>
            <view v-if="state.nextInviteDtbNum" class="rule_item">
                <view class="rule_item_l">
                    <image class="rule_item_l_icon" src="/static/distribution/member.png" />
                </view>
                <view class="rule_item_r">
                    <view class="rule_item_r_t">累计邀请分销员{{ state.nextInviteDtbNum }}个</view>
                    <view class="rule_item_r_b">
                        当前进度：<text class="active">{{ state.inviteDtbNum }}</text
                        >/{{ state.nextInviteDtbNum }}
                    </view>
                </view>
            </view>
        </vlew>
        <view class="footer" :style="{ marginBottom: safeArea ? 0 : '30rpx' }">
            <view v-if="state.auditStatus == 1" class="btn disabled1">{{ state.upgradeFalseText }}</view>
            <view v-else-if="state.satisfyUpgrade" class="btn" @click="onApply">申请升级</view>
            <view v-else class="btn disabled2">{{ state.upgradeFalseText }}</view>
        </view>
    </view>
    <Popup v-model="state.popupShow" :auditStatus="auditStatus" :reason="state.reason" @confirm="onConfirm" />
</template>

<script setup>
import Popup from './popup.vue';
import store from '@/store';
import { getImgOssUrl } from '@/commons/utils';
import request from '@/request';
import { onShow } from '@dcloudio/uni-app';
import { reactive, ref, computed, inject } from 'vue';

const currency = inject('currency');
const state = reactive({
    show: false,
    popupShow: false,
    avatar: '', //头像
    nickname: '', //昵称
    levelName: '', //当前等级名称
    nextLevelName: '', //下一等级名称
    highLevel: false, //最大等级
    upgradeFalseText: '暂不满足升级条件', //
    /* 当前 */
    addToPlug: '', //还差(累计推广金额分)" 第一等级暂无后面三项
    bindFansNum: '', //还差(绑定粉丝数量)"
    inviteDtbNum: '', //还差(邀请分销员数量)"
    /* 升级条件 */
    nextAddToPlug: '', //(累计推广金额分)" 第一等级暂无后面三项
    nextBindFansNum: '', //(绑定粉丝数量)"
    nextInviteDtbNum: '', ///*  */(邀请分销员数量)"

    satisfyUpgrade: false, //1满足条件 2 不满足条件
    auditStatus: 0, //1待审核 2已通过 3已拒绝 0暂无提起审核
    isRefresh: false, // 是否刷新页面
    reason: '' //审核原因
});

const useTabBarStore = store.useTabBarStore();
const safeArea = computed(() => {
    return useTabBarStore.safeArea;
});
const auditStatus = ref(0);
/* 升级记录已读 */
const onAuditRead = async () => {
    await request('auditReadServ');
    if (state.isRefresh) {
        getData();
    }
};

const getData = async () => {
    const { data } = await request('dtbCenterServ');
    state.avatar = data.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png');
    state.nickname = data.nickname;
    state.levelName = data.levelName;
    state.nextLevelName = data.nextLevelName;
    state.cumulativePerformance = data.cumulativePerformance;
    state.highLevel = data.highLevel == 1;
    state.satisfyUpgrade = data.levelCenter.satisfyUpgrade == 1;
    state.auditStatus = data.levelCenter.auditStatus;
    auditStatus.value = data.levelCenter.auditStatus;
    // 非最高等级
    if (!state.highLevel && state.levelName) {
        state.addToPlug =
            data.levelCenter.upgradeCondition.addToPlug &&
            currency(data.levelCenter.upgradeCondition.addToPlug).divide(100);
        state.bindFansNum = data.levelCenter.upgradeCondition.bindFansNum;
        state.inviteDtbNum = data.levelCenter.upgradeCondition.inviteDtbNum;
        state.nextLevelObj =
            data.levelCenter.levelRule.find(item => item.dtbLevelName === state.nextLevelName)?.upgradeConfig || {};
        state.nextAddToPlug = state.nextLevelObj.addToPlug && currency(state.nextLevelObj.addToPlug).divide(100);
        state.nextBindFansNum = state.nextLevelObj.bindFansNum;
        state.nextInviteDtbNum = state.nextLevelObj.inviteDtbNum;
    } else {
        state.upgradeFalseText = '您已是最高等级~';
    }
    state.show = true;
    if (state.auditStatus == 1) {
        state.upgradeFalseText = '平台审核中~';
    } else if ([2, 3].includes(state.auditStatus)) {
        state.reason = data.levelCenter.reason;
        state.popupShow = true;
        onAuditRead();
    }
};

const onApply = async () => {
    const { data } = await request('apply', { type: 'upgrade' });
    auditStatus.value = data.auditStatus;
    state.reason = data.reason;
    /* 审核通过是否刷新页面 */
    state.isRefresh = data.auditStatus == 2;
    state.popupShow = true;
};

const onConfirm = () => {
    state.auditStatus = auditStatus.value;
    if (state.auditStatus === 1) {
        state.satisfyUpgrade = 2;
        state.upgradeFalseText = '平台审核中~';
    } else if ([2, 3].includes(state.auditStatus)) {
        onAuditRead();
    }
    state.popupShow = false;
};
onShow(() => {
    getData();
});
</script>

<style lang="scss" scoped>
.upgrade_container {
    background-color: #fff;
    height: 100%;
    .active {
        color: #fe292b;
    }
    .info {
        display: flex;
        padding: 29rpx;
        padding-bottom: 25rpx;
        border-bottom: solid 2rpx #e5e5e5;
        .info_l {
            margin-right: 25rpx;
            .avatar {
                width: 101rpx;
                height: 101rpx;
                border-radius: 50%;
            }
        }
        .info_r {
            padding-top: 9rpx;
            margin-bottom: 18rpx;
            .nickname {
                font-size: 31rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
            }
            .level {
                display: flex;
                .level_label {
                    font-size: 25rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .level_text {
                    height: 36rpx;
                    padding: 0 16rpx;
                    background: #36302c;
                    border-radius: 18rpx;
                    font-size: 22rpx;
                    line-height: 36rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #fff0d6;
                }
            }
        }
    }
    .rule {
        display: flex;
        flex-direction: column;
        padding: 29rpx;
        padding-top: 43rpx;
        .rule_title {
            margin-bottom: 38rpx;
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .rule_item {
            display: flex;
            margin-bottom: 58rpx;
            .rule_item_l {
                margin-right: 18rpx;
                .rule_item_l_icon {
                    width: 72rpx;
                    height: 72rpx;
                    border-radius: 50%;
                }
            }
            .rule_item_r {
                .rule_item_r_t {
                    height: 36rpx;
                    line-height: 36rpx;
                    font-size: 25rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .rule_item_r_b {
                    height: 36rpx;
                    line-height: 36rpx;
                    font-size: 25rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0 29rpx;
        box-sizing: border-box;
        padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
        .btn {
            height: 80rpx;
            border-radius: 40rpx;
            background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            font-size: 29rpx;
            line-height: 80rpx;
            text-align: center;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
        }
        .disabled1 {
            opacity: 0.4;
        }
        .disabled2 {
            background: #cccccc;
        }
    }
}
</style>
